<!DOCTYPE html>
<html>
  <head>
    <title>css实现居中</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<style type="text/css">
	html, body {
		margin:0; 
		padding:0;
		height:100%;
	}
	body {
		background:url('page_bg.jpg') 50% 50% no-repeat #FC3;
		font-family:Georgia, Times, serifs;
	}
	 
	#floater {
		position:relative; 
		float:left;
		height:50%;	
		margin-bottom:-200px;
		width:1px;
	}
	 
	#centered {
		position:relative; 
		clear:left;
		height:400px; 
		width:80%; 
		max-width:800px; 
		min-width:400px;
		margin:0 auto;
		background:#fff;
		border:4px solid #666;
	}
	 
	#bottom {
		position:absolute;
		bottom:0; 
		right:0;
	}
	 
	#nav {
		position:absolute; 
		left:0; 
		top:0; 
		bottom:0; 
		right:70%;
		padding:20px; 
		margin:10px;
	}
	 
	#content {
		position:absolute; 
		left:30%; 
		right:0; 
		top:0; 
		bottom:0;
		overflow:auto; 
		height:340px;
		padding:20px; 
		margin:10px;
	}
	
	ul {
		list-style:none;
		padding:0; 
		margin:20px 0 0 0; 
		text-indent:0;
	}
	 
	#nav li {
		padding:0; 
		margin:3px;
	}
	 
	#nav li a {
		display:block; 
		background-color:#e8e8e8;
		padding:7px; 
		margin:0;
		text-decoration:none; 
		color:#000;
		border-bottom:1px solid #bbb;
		text-align:right;
	}
	 
	#nav li a:after {
		content:'»'; 
		color:#aaa; 
		font-weight:bold;
		display:inline; 
		float:right;
		margin:0 2px 0 5px;
	}
	 
	#nav li a:hover, #nav li a:focus {
		background:#f8f8f8;
		border-bottom-color:#777;
	}
	 
	#nav li a:hover::after {
		margin:0 0 0 7px; 
		color:#f93;
	}
	 
	#nav li a:active {
		padding:8px 7px 6px 7px;
	}
	</style>
  </head>
  
  <body>
  	<div id="floater"></div>
	<div id="centered">
		<div id="side">
			<div id="logo">
			   <strong><span>A</span> Company</strong>
			</div>
			<ul id="nav">
			   <li><a href="#">Home</a></li>
			   <li><a href="#">Products</a></li>
			   <li><a href="#">Blog</a></li>
			   <li><a href="#">Contact</a></li>
			   <li><a href="#">About</a></li>
			</ul>
		</div>
		<div id="content">
			<h1>Page Title</h1>
			Holisticly re-engineer value-added outsourcing after process-centric collaboration and idea-sharing.
						Energistically simplify impactful niche markets via enabled imperatives.
						Holisticly predominate premium innovation after compelling scenarios.
						Seamlessly recaptiualize high standards in human capital with leading-edge manufactured products.
						Distinctively syndicate standards compliant schemas before robust vortals.
						Uniquely recaptiualize leveraged web-readiness vis-a-vis out-of-the-box information.
			<h2>Heading 2</h2>
			Efficiently embrace customized web-readiness rather than customer directed processes.
						Assertively grow cross-platform imperatives vis-a-vis proactive technologies.
						Conveniently empower multidisciplinary meta-services without enterprise-wide interfaces.
						Conveniently streamline competitive strategic theme areas with focused e-markets.
						Phosfluorescently syndicate world-class communities vis-a-vis value-added markets.
						Appropriately reinvent holistic services before robust e-services.
		</div>
	</div>
	<div id="bottom">Copyright notice goes here</div>
  </body>
</html>
